<template>
  <!--系统图列表 卡片-->
  <div class="bbc">
    <div class="imgPart">
      <img :src="picture" class="imgStyle" alt="">
    <Spin size="small" fix v-if="spinShow"></Spin>
    </div>
    <div class="textPart">
      <h3>{{info.sysName}}</h3>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'ImgListCard',
    props: ['info'],
    created: function () {
      if (this.info.imgUrl !== null) {
        this.askPic(this.info.imgUrl)
      } else {
        this.picture = require('../../assets/logo.png')
        this.spinShow = false
      }
    },
    data: function () {
      return {
        picture: '',
        spinShow: true
      }
    },
    methods: {
      askPic: function (picUrl) {
        window.myapi.show_pic({url: picUrl}).then(resp => {
          this.picture = 'data:image/png;base64,' + btoa(
            new Uint8Array(resp.data)
              .reduce((data, byte) => data + String.fromCharCode(byte), '')
          )
        }).catch(info => {
          this.$Notice.warning({
            title: '操作提示',
            desc: info
          })
        }).finally((fin) => {
          this.spinShow = false
        })
      }
    }
  }
</script>

<style scoped>
  .imgStyle {
    width: 100%;
    height: 100%;
  }

  .textPart {
    border-top: solid 1px #dad6d6;
    text-align: center;
    height: 15%;
    padding-top: 5px;
  }

  .imgPart {
    text-align: center;
    height: 85%;
    padding: 5px;
  }

  .bbc{
    width: 100%;
    height: 100%;
  }
</style>
